<template>
    <div class="app-container">
      <div>
        <p class="dialogTitle title">当前地震事件:
            <span v-if="currentEvent">{{ currentEvent.eventName }}</span>
            <span v-else>请在地震事件管理中设置当前地震事件</span>
        </p>
      </div>
      <hr>
      <div>
      	<p style="font-size: 18px;font-weight: bold;">确定房屋损失比</p>
      </div>



        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary"  @click="handleUpdate">修改</el-button>
            </el-col>
            <el-col :span="6">
          		<div>计算值默认中值，可以修改每个房屋类型对应的计算值</div>
          	</el-col>
        </el-row>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="0px">  
				<table align="center" style="width: 100%;border-collapse: collapse;">
					<tr style="background: #D9D9D9;height: 35px;">
						<td align="center" :rowspan="2" >房屋类型</td>
						<td align="center" :rowspan="2" style="width: 200px;">范围</td>
						<td align="center" colspan="5">破坏等级(%)</td>
					</tr>
					<tr style="background: #D9D9D9;height: 35px;">
						<td align="center" style="width: 200px;">基本完好</td>
						<td align="center" style="width: 200px;">轻微破坏</td>
						<td align="center" style="width: 200px;">中等破坏</td>
						<td align="center" style="width: 200px;">严重破坏</td>
						<td align="center" style="width: 200px;">毁坏</td>
					</tr>
					<tr>
						<td align="center" :rowspan="3">钢筋混凝土、砌体房屋</td>
						<td align="center" style="height: 35px;">范围</td>
						<td align="center">0~5</td>
						<td align="center">6~15</td>
						<td align="center">16~45</td>
						<td align="center">46~100</td>
						<td align="center">81~100</td>
					</tr>
					<tr>
						<td align="center" style="height: 35px;">中值</td>
						<td align="center">3</td>
						<td align="center">11</td>
						<td align="center">31</td>
						<td align="center">73</td>
						<td align="center">91</td>
					</tr>
					<tr>
						<td align="center" style="height: 35px;">计算值</td>
						<td align="center">
							<el-form-item prop="intact1">
								<el-input v-model="form.intact1" />
							</el-form-item>
						</td>
						<td align="center">
							<el-form-item prop="minor1">
								<el-input v-model="form.minor1"  />
							</el-form-item>
						</td>
						<td align="center">
							<el-form-item prop="moderate1">
								<el-input v-model="form.moderate1" />
							</el-form-item>
						</td>
						<td align="center">
							<el-form-item prop="serious1">
								<el-input v-model="form.serious1" />
							</el-form-item>
						</td>
						<td align="center">
							<el-form-item prop="destroy1">
								<el-input v-model="form.destroy1" />
							</el-form-item>
						</td>
					</tr>
					
					<tr>
						<td align="center" :rowspan="3">工业厂房</td>
						<td align="center" style="height: 35px;">范围</td>
						<td align="center">0~4</td>
						<td align="center">5~16</td>
						<td align="center">17~45</td>
						<td align="center">46~100</td>
						<td align="center">81~100</td>
					</tr>
					<tr>
						<td align="center" style="height: 35px;">中值</td>
						<td align="center">3</td>
						<td align="center">11</td>
						<td align="center">31</td>
						<td align="center">73</td>
						<td align="center">91</td>
					</tr>
					<tr>
						<td align="center" style="height: 35px;">计算值</td>
						<td align="center">
							<el-form-item prop="intact2">
								<el-input v-model="form.intact2" />
							</el-form-item>
						</td>
						<td align="center">
							<el-form-item prop="minor2">
								<el-input v-model="form.minor2"  />
							</el-form-item>
						</td>
						<td align="center">
							<el-form-item prop="moderate2">
								<el-input v-model="form.moderate2" />
							</el-form-item>
						</td>
						<td align="center">
							<el-form-item prop="serious2">
								<el-input v-model="form.serious2" />
							</el-form-item>
						</td>
						<td align="center">
							<el-form-item prop="destroy2">
								<el-input v-model="form.destroy2" />
							</el-form-item>
						</td>
					</tr>
					<tr>
						<td align="center" :rowspan="3">城镇平房、农村房屋</td>
						<td align="center" style="height: 35px;">范围</td>
						<td align="center">0~5</td>
						<td align="center">6~15</td>
						<td align="center">16~40</td>
						<td align="center">41~100</td>
						<td align="center">71~100</td>
					</tr>
					<tr>
						<td align="center" style="height: 35px;">中值</td>
						<td align="center">3</td>
						<td align="center">11</td>
						<td align="center">28</td>
						<td align="center">71</td>
						<td align="center">86</td>
					</tr>
					<tr>
						<td align="center" style="height: 35px;">计算值</td>
						<td align="center">
							<el-form-item prop="intact3">
								<el-input v-model="form.intact3" />
							</el-form-item>
						</td>
						<td align="center">
							<el-form-item prop="minor3">
								<el-input v-model="form.minor3"  />
							</el-form-item>
						</td>
						<td align="center">
							<el-form-item prop="moderate3">
								<el-input v-model="form.moderate3" />
							</el-form-item>
						</td>
						<td align="center">
							<el-form-item prop="serious3">
								<el-input v-model="form.serious3" />
							</el-form-item>
						</td>
						<td align="center">
							<el-form-item prop="destroy3">
								<el-input v-model="form.destroy3" />
							</el-form-item>
						</td>
					</tr>
					
					<tr>
						<td align="center" :rowspan="3">钢结构</td>
						<td align="center" style="height: 35px;">范围</td>
						<td align="center">0~5</td>
						<td align="center">6~15</td>
						<td align="center">16~45</td>
						<td align="center">46~100</td>
						<td align="center">81~100</td>
					</tr>
					<tr>
						<td align="center" style="height: 35px;">中值</td>
						<td align="center">3</td>
						<td align="center">11</td>
						<td align="center">31</td>
						<td align="center">73</td>
						<td align="center">91</td>
					</tr>
					<tr>
						<td align="center" style="height: 35px;">计算值</td>
						<td align="center">
							<el-form-item prop="intact4">
								<el-input v-model="form.intact4" />
							</el-form-item>
						</td>
						<td align="center">
							<el-form-item prop="minor4">
								<el-input v-model="form.minor4"  />
							</el-form-item>
						</td>
						<td align="center">
							<el-form-item prop="moderate4">
								<el-input v-model="form.moderate4" />
							</el-form-item>
						</td>
						<td align="center">
							<el-form-item prop="serious4">
								<el-input v-model="form.serious4" />
							</el-form-item>
						</td>
						<td align="center">
							<el-form-item prop="destroy4">
								<el-input v-model="form.destroy4" />
							</el-form-item>
						</td>
					</tr>
				</table>						
			</el-form>

    </div>
</template>

<script setup name="LossRatio">
import useEventStore from "@/store/modules/event";
import { getAllList, getDetail, updateLoss,updateHouseLossRatio } from "@/api/directLossAssess/lossRatio.js"
const { proxy } = getCurrentInstance();
const dataList = ref([]);
const ids = ref();
const loading = ref(false);
const single = ref(true);
const multiple = ref(true);
const open = ref(false);
const total = ref(0);
const showSearch = ref(true);
const option = ref([]);
const option1 = ref([{ label: '基本完好', value: '0' }, { label: '轻微破坏', value: '1' }, { label: '中等破坏', value: '2' }, { label: '严重破坏', value: '3' }, { label: '毁坏', value: '4' }]);
const option2 = ref([{ label: '农村住宅', value: '0' }, { label: '农村公用', value: '1' }, { label: '城市住宅', value: '2' }, { label: '城市公用', value: '3' }, { label: '政府办公', value: '4' }, { label: '教育系统', value: '5' }, { label: '卫生系统', value: '6' }]);
const currentEvent = computed(() => useEventStore().currentEvent);

const validator0_5 = (rule, value, callback) => {
	value = String(value)
	if(isNaN(value) || !value) {
		return callback(new Error());
	}
	//var re = /^([0-9]+[\d]*(.[0-9]{2}))$/;
	//var re = /^[0-9]+(\.[0-9]{1,2})?$/;
	
	//if(!re.test(value)) {
	if(!(value<=5&&value>=0)) {
		callback(new Error());
	} else {
		callback();
	}
}
const validator6_15 = (rule, value, callback) => {
	value = String(value)
	if(isNaN(value) || !value) {
		return callback(new Error());
	}
	if(!(value<=15&&value>=6)) {
		callback(new Error());
	} else {
		callback();
	}
}
const validator16_45 = (rule, value, callback) => {
	value = String(value)
	if(isNaN(value) || !value) {
		return callback(new Error());
	}
	if(!(value<=45&&value>=16)) {
		callback(new Error());
	} else {
		callback();
	}
}
const validator46_100 = (rule, value, callback) => {
	value = String(value)
	if(isNaN(value) || !value) {
		return callback(new Error());
	}
	if(!(value<=100&&value>=46)) {
		callback(new Error());
	} else {
		callback();
	}
}
const validator81_100 = (rule, value, callback) => {
	value = String(value)
	if(isNaN(value) || !value) {
		return callback(new Error());
	}
	if(!(value<=100&&value>=81)) {
		callback(new Error());
	} else {
		callback();
	}
}
const validator0_4 = (rule, value, callback) => {
	value = String(value)
	if(isNaN(value) || !value) {
		return callback(new Error());
	}
	if(!(value<=4&&value>=0)) {
		callback(new Error());
	} else {
		callback();
	}
}
const validator5_16 = (rule, value, callback) => {
	value = String(value)
	if(isNaN(value) || !value) {
		return callback(new Error());
	}
	if(!(value<=16&&value>=5)) {
		callback(new Error());
	} else {
		callback();
	}
}

const validator17_45 = (rule, value, callback) => {
	value = String(value)
	if(isNaN(value) || !value) {
		return callback(new Error());
	}
	if(!(value<=45&&value>=17)) {
		callback(new Error());
	} else {
		callback();
	}
}
const validator16_40 = (rule, value, callback) => {
	value = String(value)
	if(isNaN(value) || !value) {
		return callback(new Error());
	}
	if(!(value<=40&&value>=16)) {
		callback(new Error());
	} else {
		callback();
	}
}
const validator41_100 = (rule, value, callback) => {
	value = String(value)
	if(isNaN(value) || !value) {
		return callback(new Error());
	}
	if(!(value<=100&&value>=41)) {
		callback(new Error());
	} else {
		callback();
	}
}
const validator71_100 = (rule, value, callback) => {
	value = String(value)
	if(isNaN(value) || !value) {
		return callback(new Error());
	}
	if(!(value<=100&&value>=71)) {
		callback(new Error());
	} else {
		callback();
	}
}
const data = reactive({
    queryParams: {
        page: 1,
        rows: 10,
        structureType: undefined,
        destructionType: undefined,
        samplingPointName: undefined,
        sampleCode: undefined,
        createUserName: undefined,
    },
    form: {
	    id:"",
	    //地震事件id
	    xsemId:"",
	    //钢筋混凝土砌体房屋
	    intact1:"",
	    minor1:"",
	    moderate1:"",
	    serious1:"",
	    destroy1:"",
	    //工业厂房
	    intact2:"",
	    minor2:"",
	    moderate2:"",
	    serious2:"",
	    destroy2:"",
	
	    //城镇平房、农村房屋
	    intact3:"",
	    minor3:"",
	    moderate3:"",
	    serious3:"",
	    destroy3:"",
	    //钢结构
	    intact4:"",
	    minor4:"",
	    moderate4:"",
	    serious4:"",
	    destroy4:"",
    },
		rules: {
			intact1: [{
				required: true,
				message: errormessage0_5,
				trigger: "blur",
				validator: validator0_5
			}],
			minor1: [{
				required: true,
				message: errormessage6_15,
				trigger: "blur",
				validator: validator6_15
			}],
			moderate1: [{
				required: true,
				message: errormessage16_45,
				trigger: "blur",
				validator: validator16_45
			}],
			serious1: [{
				required: true,
				message: errormessage46_100,
				trigger: "blur",
				validator: validator46_100
			}],
			destroy1: [{
				required: true,
				message: errormessage81_100,
				trigger: "blur",
				validator: validator81_100
			}],
			intact2: [{
				required: true,
				message: errormessage0_4,
				trigger: "blur",
				validator: validator0_4
			}],
			minor2: [{
				required: true,
				message: errormessage5_16,
				trigger: "blur",
				validator: validator5_16
			}],
			moderate2: [{
				required: true,
				message: errormessage17_45,
				trigger: "blur",
				validator: validator17_45
			}],
			serious2: [{
				required: true,
				message: errormessage46_100,
				trigger: "blur",
				validator: validator46_100
			}],
			destroy2: [{
				required: true,
				message: errormessage81_100,
				trigger: "blur",
				validator: validator81_100
			}],
			intact3: [{
				required: true,
				message: errormessage0_5,
				trigger: "blur",
				validator: validator0_5
			}],
			minor3: [{
				required: true,
				message: errormessage6_15,
				trigger: "blur",
				validator: validator6_15
			}],
			moderate3: [{
				required: true,
				message: errormessage16_40,
				trigger: "blur",
				validator: validator16_40
			}],
			serious3: [{
				required: true,
				message: errormessage41_100,
				trigger: "blur",
				validator: validator41_100
			}],
			destroy3: [{
				required: true,
				message: errormessage71_100,
				trigger: "blur",
				validator: validator71_100
			}],
			intact4: [{
				required: true,
				message: errormessage0_5,
				trigger: "blur",
				validator: validator0_5
			}],
			minor4: [{
				required: true,
				message: errormessage6_15,
				trigger: "blur",
				validator: validator6_15
			}],
			moderate4: [{
				required: true,
				message: errormessage16_45,
				trigger: "blur",
				validator: validator16_45
			}],
			serious4: [{
				required: true,
				message: errormessage46_100,
				trigger: "blur",
				validator: validator46_100
			}],
			destroy4: [{
				required: true,
				message: errormessage81_100,
				trigger: "blur",
				validator: validator81_100
			}],
		}
})
const { queryParams, form, rules } = toRefs(data)

function errormessage0_5(){
	proxy.$modal.msgWarning("请输入范围0~5之间的值");
}
function errormessage6_15(){
	proxy.$modal.msgWarning("请输入范围6~15之间的值");
}
function errormessage16_45(){
	proxy.$modal.msgWarning("请输入范围16~45之间的值");
}
function errormessage46_100(){
	proxy.$modal.msgWarning("请输入范围46~100之间的值");
}
function errormessage81_100(){
	proxy.$modal.msgWarning("请输入范围81~100之间的值");
}
function errormessage0_4(){
	proxy.$modal.msgWarning("请输入范围0~4之间的值");
}
function errormessage5_16(){
	proxy.$modal.msgWarning("请输入范围5~16之间的值");
}
function errormessage17_45(){
	proxy.$modal.msgWarning("请输入范围17~45之间的值");
}
function errormessage16_40(){
	proxy.$modal.msgWarning("请输入范围16~40之间的值");
}
function errormessage41_100(){
	proxy.$modal.msgWarning("请输入范围41~100之间的值");
}
function errormessage71_100(){
	proxy.$modal.msgWarning("请输入范围71~100之间的值");
}

/** 修改按钮操作 */
function handleUpdate() {
	form.value.xsemId = currentEvent.value.id;
	proxy.$refs["formRef"].validate(valid => {
    if (valid) {
	  	updateHouseLossRatio(form.value).then(res => {
	      
	      form.value = res.data;
	      proxy.$modal.msgSuccess("修改成功");
	      getList();
	  	})
	  }
 	})
}

/** 查询数据列表 */
function getList() {
  if (currentEvent.value) {
      getDetail(currentEvent.value.id).then(res => {
      	if(res.data){
      		form.value = res.data;
      	}else{
      		form.value.intact1 = "3";
					form.value.minor1="11";
					form.value.moderate1="31";
					form.value.serious1="73";
					form.value.destroy1="91";
					form.value.intact2="2";
					form.value.minor2="11";
					form.value.moderate2="31";
					form.value.serious2="73";
					form.value.destroy2="91";
					form.value.intact3="3";
					form.value.minor3="11";
					form.value.moderate3="28";
					form.value.serious3="71";
					form.value.destroy3="86";
					form.value.intact4="3";
					form.value.minor4="11";
					form.value.moderate4="31";
					form.value.serious4="73";
					form.value.destroy4="91";
      	}        
    })
  }
}

onMounted(() => {
    setTimeout(() => {
        getList();
    }, 200)
})

</script>

<style scoped lang="scss">
.title {
    margin: 0 0 20px !important;
}
table td{
	border:1px solid #c6c6c6;
}
:deep(table .el-form-item--default){
  margin-bottom: 0px!important;
}
:deep(.el-form-item__error) {
  display: none !important;
}
:deep(.el-input__inner) {
  text-align: center !important;
}

</style>

